React स्ट्रीमिंग: अनुकूलित उपयोगकर्ता अनुभव के लिए प्रोग्रेसिव सर्वर-साइड रेंडरिंग

वेब विकास की दुनिया में, एक तेज़ और प्रतिक्रियाशील उपयोगकर्ता अनुभव प्रदान करना सर्वोपरि है। उपयोगकर्ता अपेक्षा करते हैं कि वेबसाइटें जल्दी से लोड हों और बिना किसी देरी के इंटरैक्टिव हों। React, उपयोगकर्ता इंटरफेस बनाने के लिए एक लोकप्रिय जावास्क्रिप्ट लाइब्रेरी, इस चुनौती का समाधान करने के लिए स्ट्रीमिंग सर्वर-साइड रेंडरिंग (SSR) नामक एक शक्तिशाली तकनीक प्रदान करता है। यह लेख React स्ट्रीमिंग SSR की अवधारणा पर प्रकाश डालता है, इसके लाभों, कार्यान्वयन और वेबसाइट प्रदर्शन और उपयोगकर्ता अनुभव पर प्रभाव का पता लगाता है।

सर्वर-साइड रेंडरिंग (SSR) क्या है?

पारंपरिक क्लाइंट-साइड रेंडरिंग (CSR) में ब्राउज़र HTML, जावास्क्रिप्ट और CSS फ़ाइलों को डाउनलोड करता है और फिर क्लाइंट-साइड पर सामग्री को रेंडर करता है। जबकि यह दृष्टिकोण लचीला है, यह प्रारंभिक रेंडर में देरी कर सकता है, क्योंकि उपयोगकर्ता को सभी संसाधनों को डाउनलोड करने और किसी भी सामग्री को देखने से पहले जावास्क्रिप्ट को निष्पादित करने के लिए इंतजार करना पड़ता है। SSR, दूसरी ओर, सर्वर पर React घटकों को रेंडर करता है और पूरी तरह से रेंडर किए गए HTML को क्लाइंट को भेजता है। इसके परिणामस्वरूप तेज़ प्रारंभिक लोड समय होता है, क्योंकि ब्राउज़र को पूरी तरह से निर्मित HTML प्राप्त होता है जिसे तुरंत प्रदर्शित किया जा सकता है।

पारंपरिक SSR की सीमाएँ

जबकि पारंपरिक SSR CSR पर एक महत्वपूर्ण सुधार प्रदान करता है, इसकी अपनी सीमाएँ हैं। पारंपरिक SSR में, किसी भी HTML को क्लाइंट को भेजने से पहले पूरे एप्लिकेशन को सर्वर पर रेंडर करने की आवश्यकता होती है। यह एक बाधा हो सकती है, खासकर कई घटकों और डेटा निर्भरताओं वाले जटिल अनुप्रयोगों के लिए। पहले बाइट का समय (TTFB) अधिक हो सकता है, जिससे उपयोगकर्ता के लिए एक कथित धीमी गति होती है।

React स्ट्रीमिंग SSR में प्रवेश करें: एक प्रोग्रेसिव दृष्टिकोण

React स्ट्रीमिंग SSR एक प्रोग्रेसिव दृष्टिकोण अपनाकर पारंपरिक SSR की सीमाओं को दूर करता है। सर्वर पर पूरे एप्लिकेशन को रेंडर करने की प्रतीक्षा करने के बजाय, स्ट्रीमिंग SSR रेंडरिंग प्रक्रिया को छोटे-छोटे टुकड़ों में तोड़ता है और इन टुकड़ों को क्लाइंट को स्ट्रीम करता है क्योंकि वे उपलब्ध होते हैं। यह ब्राउज़र को बहुत पहले सामग्री प्रदर्शित करना शुरू करने की अनुमति देता है, कथित प्रदर्शन में सुधार करता है और TTFB को कम करता है। इसे एक रेस्तरां के रूप में सोचें जो आपके भोजन को चरणों में तैयार करता है: ऐपेटाइज़र पहले परोसा जाता है, फिर मुख्य पाठ्यक्रम, और अंत में मिठाई, पूरे भोजन के एक ही बार में तैयार होने की प्रतीक्षा करने के बजाय।

React स्ट्रीमिंग SSR के लाभ

React स्ट्रीमिंग SSR वेबसाइट प्रदर्शन और उपयोगकर्ता अनुभव के लिए कई लाभ प्रदान करता है:

• तेज़ प्रारंभिक लोड समय: क्लाइंट को HTML टुकड़ों को स्ट्रीम करके, ब्राउज़र बहुत पहले सामग्री प्रदर्शित करना शुरू कर सकता है, जिसके परिणामस्वरूप तेज़ कथित लोड समय और बेहतर उपयोगकर्ता जुड़ाव होता है।
• बेहतर पहला बाइट का समय (TTFB): स्ट्रीमिंग SSR पूरे एप्लिकेशन को रेंडर करने की प्रतीक्षा करने के बजाय, तैयार होते ही प्रारंभिक HTML टुकड़ा भेजकर TTFB को कम करता है।
• बेहतर उपयोगकर्ता अनुभव: तेज़ प्रारंभिक लोड समय से बेहतर उपयोगकर्ता अनुभव होता है, क्योंकि उपयोगकर्ताओं को सामग्री के प्रकट होने की प्रतीक्षा नहीं करनी पड़ती है।
• बेहतर SEO: खोज इंजन सामग्री को अधिक प्रभावी ढंग से क्रॉल और इंडेक्स कर सकते हैं, क्योंकि HTML सर्वर पर आसानी से उपलब्ध है।
• प्रोग्रेसिव हाइड्रेशन: स्ट्रीमिंग SSR प्रोग्रेसिव हाइड्रेशन को सक्षम करता है, जहां क्लाइंट-साइड React कोड धीरे-धीरे इवेंट लिसनर्स को जोड़ता है और HTML टुकड़ों को स्ट्रीम किए जाने के साथ एप्लिकेशन को इंटरैक्टिव बनाता है।
• बेहतर संसाधन उपयोग: रेंडरिंग प्रक्रिया को छोटे-छोटे टुकड़ों में तोड़कर, स्ट्रीमिंग SSR सर्वर पर संसाधन उपयोग में सुधार कर सकता है।

React स्ट्रीमिंग SSR कैसे काम करता है

React स्ट्रीमिंग SSR क्लाइंट को HTML टुकड़ों को स्ट्रीम करने के लिए ReactDOMServer.renderToPipeableStream() API का लाभ उठाता है। यह API एक पठनीय स्ट्रीम लौटाता है जिसे सर्वर की प्रतिक्रिया वस्तु में पाइप किया जा सकता है। यहाँ यह कैसे काम करता है इसका एक सरलीकृत चित्रण दिया गया है:

1. सर्वर को एक पृष्ठ के लिए एक अनुरोध प्राप्त होता है।
2. सर्वर React एप्लिकेशन को एक स्ट्रीम में रेंडर करने के लिए ReactDOMServer.renderToPipeableStream() को कॉल करता है।
3. स्ट्रीम React घटकों के रेंडर होने पर HTML टुकड़ों का उत्सर्जन शुरू कर देती है।
4. सर्वर स्ट्रीम को प्रतिक्रिया वस्तु में पाइप करता है, क्लाइंट को HTML टुकड़े भेजता है।
5. ब्राउज़र HTML टुकड़े प्राप्त करता है और उन्हें उत्तरोत्तर प्रदर्शित करना शुरू कर देता है।
6. एक बार सभी HTML टुकड़े प्राप्त हो जाने के बाद, ब्राउज़र React एप्लिकेशन को हाइड्रेट करता है, जिससे यह इंटरैक्टिव हो जाता है।

React स्ट्रीमिंग SSR को लागू करना

React स्ट्रीमिंग SSR को लागू करने के लिए, आपको एक Node.js सर्वर और एक React एप्लिकेशन की आवश्यकता होगी। यहाँ एक चरण-दर-चरण मार्गदर्शिका दी गई है:

1. एक Node.js सर्वर स्थापित करें: Express या Koa जैसे ढांचे का उपयोग करके एक Node.js सर्वर बनाएं।
2. React और ReactDOMServer स्थापित करें: react और react-dom पैकेज स्थापित करें।
3. एक React एप्लिकेशन बनाएं: उन घटकों के साथ एक React एप्लिकेशन बनाएं जिन्हें आप सर्वर पर रेंडर करना चाहते हैं।
4. ReactDOMServer.renderToPipeableStream() का उपयोग करें: अपने सर्वर कोड में, अपने React एप्लिकेशन को एक स्ट्रीम में रेंडर करने के लिए ReactDOMServer.renderToPipeableStream() API का उपयोग करें।
5. स्ट्रीम को प्रतिक्रिया वस्तु में पाइप करें: क्लाइंट को HTML टुकड़े भेजने के लिए स्ट्रीम को सर्वर की प्रतिक्रिया वस्तु में पाइप करें।
6. त्रुटियों को संभालें: रेंडरिंग प्रक्रिया के दौरान होने वाली किसी भी त्रुटि को पकड़ने के लिए त्रुटि हैंडलिंग लागू करें।
7. हाइड्रेशन के लिए एक स्क्रिप्ट टैग जोड़ें: क्लाइंट-साइड पर React एप्लिकेशन को हाइड्रेट करने के लिए HTML में एक स्क्रिप्ट टैग शामिल करें।

उदाहरण कोड स्निपेट (सर्वर-साइड):

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App'); // आपका React घटक

const app = express();
const port = 3000;

app.get('/', (req, res) => {
  const { pipe, abort } = ReactDOMServer.renderToPipeableStream(, {
    bootstrapModules: [require.resolve('./client')], // क्लाइंट-साइड एंट्री पॉइंट
    onShellReady() {
      res.setHeader('content-type', 'text/html; charset=utf-8');
      pipe(res);
    },
    onError(err) {
      console.error(err);
      res.statusCode = 500;
      res.send('
माफ़ करें, कुछ गड़बड़ हो गई
');
    }
  });

  setTimeout(abort, 10000); // वैकल्पिक: अनिश्चित काल तक लटकने से रोकने के लिए टाइमआउट
});

app.use(express.static('public')); // स्थैतिक संपत्तियों को परोसें

app.listen(port, () => {
  console.log(`सर्वर http://localhost:${port} पर सुन रहा है`);
});

उदाहरण कोड स्निपेट (क्लाइंट-साइड - `client.js`):

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.hydrateRoot(document,
    
);

उदाहरण React ऐप घटक (App.js):

import React, { Suspense } from 'react';

function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("डेटा सफलतापूर्वक लोड हो गया!");
    }, 2000);
  });
}

function SlowComponent() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetchData().then(result => setData(result));
  }, []);

  if (!data) {
    throw new Promise(resolve => setTimeout(resolve, 2000)); // एक लोडिंग देरी का अनुकरण करें
  }

  return 
{data}
;
}

export default function App() {
  return (
    

      
स्ट्रीमिंग SSR में आपका स्वागत है!
      
यह React स्ट्रीमिंग SSR का एक प्रदर्शन है।
      लोड हो रहा है...
}>